<template>
	<view>
		<!-- 选择课包 -->
		<text lines="1" class="text_8">选择课包</text>
		<view class="item">
			<view class="week-list flex-wrap">
				<view class="week-item" :class="{'active': jiaoSelect.includes(item.item_id)}"
					v-for="item in coursePackageList" :key="item.item_id" @click="handjiao(item)">
					{{ item.name }}
				</view>
			</view>
		</view>

		<!-- 选择教练 -->
		<text lines="1" class="text_8">选择教练</text>
		<view class="item">
			<view class="week-list flex-wrap">
				<view class="week-item" :class="{'active': coachSelect.includes(item.id)}" v-for="item in coachList"
					:key="item.id" @click="handcoach(item)">
					{{ item.coach_name }}
				</view>
			</view>
		</view>

		<!-- 分组 1 -->
		<u-row>
			<u-col :span="5">
				<u-form-item label="默认分组 1">
					<u-input v-model="group1" style="width: 150rpx;" @input="changeGroup(1)"></u-input>
				</u-form-item>
			</u-col>
			<u-col :span="1" style="text-align: left;">
				<u-form-item label-width="10rpx">
					<u-checkbox shape='circle' :checked="filters.open_group1" @change="changeOpen(1)"></u-checkbox>
				</u-form-item>
			</u-col>
			<u-col :span="5" style="text-align: right;">
				<u-button type="primary" size="mini" @click="addSku(1)" :disabled="!filters.open_group1"
					style="width: 150rpx;">
					增加
				</u-button>
			</u-col>
		</u-row>
		<u-row v-show="filters.open_group1">
			<u-col :span="12">
				<u-form-item label="默认分组 1 规格">
					<view v-for="(input, index) in group1SkuList" :key="index" class="input-group">
						<u-input v-model="input.value" placeholder="请输入内容" style="width: 120rpx;"
							@input="changeSku(1)"></u-input>
						<view class="" @click="removeInput(index, 1)">
							删除
						</view>
					</view>
				</u-form-item>
			</u-col>
		</u-row>

		<!-- 分组 2 -->
		<u-row>
			<u-col :span="5">
				<u-form-item label="规格分组 2">
					<u-input v-model="group2" style="width: 150rpx;" @input="changeGroup(2)"></u-input>
				</u-form-item>
			</u-col>
			<u-col :span="1" style="text-align: left;">
				<u-form-item label-width="10rpx">
					<u-checkbox shape='circle' :checked="filters.open_group2" @change="changeOpen(2)"></u-checkbox>
				</u-form-item>
			</u-col>
			<u-col :span="5" style="text-align: right;">
				<u-button type="primary" size="mini" @click="addSku(2)" :disabled="!filters.open_group2">
					增加
				</u-button>
			</u-col>
		</u-row>
		<u-row v-show="filters.open_group2">
			<u-col :span="12">
				<u-form-item label="默认分组 2 规格">
					<view v-for="(input, index) in group2SkuList" :key="index" class="input-group">
						<u-input v-model="input.value" placeholder="请输入内容" style="width: 120rpx;"
							@input="changeSku(2)"></u-input>
						<view class="" @click="removeInput(index, 2)">
							删除
						</view>
					</view>
				</u-form-item>
			</u-col>
		</u-row>

		<!-- 分组 3 -->
		<u-row>
			<u-col :span="5">
				<u-form-item label="规格分组 3">
					<u-input v-model="group3" style="width: 150rpx;" @input="changeGroup(3)"></u-input>
				</u-form-item>
			</u-col>
			<u-col :span="1" style="text-align: left;">
				<u-form-item label-width="10rpx">
					<u-checkbox shape='circle' :checked="filters.open_group3" @change="changeOpen(3)"></u-checkbox>
				</u-form-item>
			</u-col>
			<u-col :span="5" style="text-align: right;">
				<u-button type="primary" size="mini" @click="addSku(3)" :disabled="!filters.open_group3">
					增加
				</u-button>
			</u-col>
		</u-row>
		<u-row v-show="filters.open_group3">
			<u-col :span="12">
				<u-form-item label="默认分组 3 规格">
					<view v-for="(input, index) in group3SkuList" :key="index" class="input-group">
						<u-input v-model="input.value" placeholder="请输入内容" style="width: 120rpx;"
							@input="changeSku(3)"></u-input>
						<view class="" @click="removeInput(index, 3)">
							删除
						</view>
					</view>
				</u-form-item>
			</u-col>
		</u-row>

		<!-- 数据展示区域 -->
		<view class="data-display">
			<view v-for="(row, rowIndex) in tableData" :key="rowIndex" class="data-row">
				<view class="data-cell" v-for="(column, colIndex) in columns" :key="colIndex">
					<view class="label">{{ column.label }}</view>
					<view class="input-container">
						<input v-if="column.type == 'text'" v-model="row[column.prop]" :disabled="column.disable" />
						<input v-else-if="column.type === 'number'" v-model.number="row[column.prop]" type="number"
							:controls="true" :min="0" :step="1" style="width: 90px;" :disabled="column.disable" />
						<!-- 复选框（状态字段） -->
						<u-checkbox v-else-if="column.type === 'checkbox'" shape="circle" v-model="row[column.prop]"
							:checked="column.checked || false" :disabled="column.disable" style="margin-left: 0;"
							@change="handleCheckboxChange(rowIndex, column.prop)" />
						<input type="text" :value="formatTimestamp(row[column.prop])" placeholder="选择日期"
							v-else-if="column.type === 'date'"
							style="width: 180rpx; border: 1rpx solid #d9d9d9; border-radius: 4rpx; padding: 0 10rpx;"
							@click="showDatePicker(rowIndex, column.prop)"
							@input="handleDateInput(rowIndex, column.prop, $event.target.value)" />
						<!-- 优化后的日期选择器（统一使用 v-model 绑定时间戳，简化事件处理） -->
						<u-datetime-picker :show="row[`show${column.prop}Picker`]" v-model="row[column.prop]"
							mode="date" @confirm="(value) => handleDateConfirm(rowIndex, column.prop, value)"
							@cancel="hideDatePicker(rowIndex, column.prop)" :minDate="minDate" :maxDate="maxDate" />
					</view>
				</view>
			</view>
		</view>
		<view class="" style="width: 100%;height: 12vh;"></view>
		<view class="d-flex flex-row justify-space-between justify-center align-center"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 6%;z-index: 99;">
			<view class="" @click="handleCreate"
				style="width: 100%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));color: #ffffff;font-size: 24rpx;text-align: center;line-height: 80rpx;border-radius: 35rpx;">
				确定创建
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @desc 生成唯一值
	 * @returns {string}
	 */
	const generateUnique13DigitNumber = () => {
		const now = Date.now(); // 获取当前时间戳（毫秒）
		const randomPart = Math.floor(Math.random() * 1000); // 生成一个0到999之间的随机数
		const uniqueNumber = Math.floor((now % 1000000000000) + randomPart); // 取时间戳的后12位并加上随机数的前几位，确保是13位

		return 'S' + uniqueNumber;
	}

	export default {
		data() {
			const twoDaysAgo = new Date();
			twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);
			const today = new Date();
			const year = today.getFullYear();
			const month = String(today.getMonth() + 1).padStart(2, '0');
			const day = String(today.getDate()).padStart(2, '0');
			const todayDate = `${year}-${month}-${day}`;

			return {
				group1: '分组 1',
				group2: '分组 2',
				group3: '分组 3',
				filters: {
					open_group1: false,
					open_group2: false,
					open_group3: false,
					train_course: '模拟课程ID'
				},
				group1SkuList: [],
				group2SkuList: [],
				group3SkuList: [],
				columns: [],
				tableData: [],
				coursePackageList: [{
						course_price: "1000.00",
						hour_num: 10,
						item_id: "186-10-1000.00-0-313",
						name: "初级一对一 ",
					},
					{
						course_price: "1300.00",
						hour_num: 20,
						item_id: "187-10-1300.00-0-313",
						name: "中级一对一",
					},
					{
						course_price: "1800.00",
						hour_num: 30,
						item_id: "188-10-1800.00-0-313",
						name: "高级一对一",
					}
				],
				jiaoSelect: [],
				coachList: [{
						coach_name: "关汉卿",
						coach_pin: "83-关汉卿",
						id: 83,
					},
					{
						coach_name: "纳兰容若",
						coach_pin: "85-纳兰容若",
						id: 85,
					},
					{
						coach_name: "宋之问",
						coach_pin: "91-宋之问",
						id: 91,
					},
					{
						coach_name: "王彩华",
						coach_pin: "354-王彩华",
						id: 354,
					}
				],
				coachSelect: [],
				mode: 'single', // 日历模式（默认日期选择）
				minDate: new Date('2025-01-01').getTime(), // 示例最小日期
				maxDate: new Date('2030-01-01').getTime(), // 示例最大日期
				tableData: []
			};
		},
		created() {
			// 初始化columns
			// this.updateColumns();
			console.log('minDate:', this.minDate);
			console.log('maxDate:', this.maxDate);
		},
		methods: {
			// 初始化行数据时添加 showXXPicker 字段
			addTableData() {
				this.tableData = [{
					enroll_start: '',
					enroll_end: '',
					showEnrollStartPicker: false, // 对应 enroll_start 的弹窗状态
					showEnrollEndPicker: false // 对应 enroll_end 的弹窗状态
				}];
			},
			// 显示日期选择器（简化字段名生成，直接使用 prop 拼接）
			showDatePicker(rowIndex, prop) {
				this.$set(this.tableData[rowIndex], `show${prop}Picker`, true);
				console.log(3333)
			},

			// 确认选择时处理（直接使用 value 作为时间戳，移除多余的 propCapitalize）
			handleDateConfirm(rowIndex, prop, value) {
				console.log('rowIndex:', rowIndex);
				console.log('prop:', prop);
				console.log('value 的值:', value);
				try {
					const timestamp = new Date(value).getTime();
					this.$set(this.tableData[rowIndex], prop, timestamp);
					const pickerProp = `show${prop}Picker`;
					this.$set(this.tableData[rowIndex], pickerProp, false);
				} catch (error) {
					console.error('日期解析出错:', error);
				}
			},

			// 取消选择时处理（直接隐藏弹窗，无需操作时间戳）
			hideDatePicker(rowIndex, prop) {
				this.$set(this.tableData[rowIndex], `show${prop}Picker`, false);
				console.log(2222)
			},

			// 时间戳格式化（保留原有逻辑，但统一输出格式）
			formatTimestamp(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				const y = date.getFullYear();
				const MM = String(date.getMonth() + 1).padStart(2, '0');
				const d = String(date.getDate()).padStart(2, '0');
				const h = String(date.getHours()).padStart(2, '0');
				const m = String(date.getMinutes()).padStart(2, '0');
				const s = String(date.getSeconds()).padStart(2, '0');
				return `${y}-${MM}-${d} ${h}:${m}:${s}`; // 统一输出带时分秒的格式
			},

			// 手动输入日期时处理（兼容用户输入的不同格式）
			handleDateInput(rowIndex, prop, inputValue) {
				const date = new Date(inputValue.replace(/-/g, '/')); // 转换 '-' 为 '/' 兼容解析
				if (!isNaN(date.getTime())) {
					this.$set(this.tableData[rowIndex], prop, date.getTime());
				}
			},
			// 处理输入框手动输入日期
			handleDateInput(rowIndex, prop, inputValue) {
				const date = new Date(inputValue);
				if (!isNaN(date.getTime())) {
					const timestamp = date.getTime();
					this.$set(this.tableData[rowIndex], prop, timestamp);
				}
			},
			// 将时间戳转换为日期格式
			formatTimestamp(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			// 处理输入框手动输入日期
			handleDateInput(rowIndex, prop, inputValue) {
				const date = new Date(inputValue);
				if (!isNaN(date.getTime())) {
					const timestamp = date.getTime();
					this.$set(this.tableData[rowIndex], prop, timestamp);
				}
			},
			// 处理复选框状态改变
			handleCheckboxChange(rowIndex, prop) {
				this.$set(this.tableData[rowIndex], prop, !this.tableData[rowIndex][prop]);
			},
			handleCreate() {
				// 深拷贝 tableData，避免修改原始数据
				const skuData = JSON.parse(JSON.stringify(this.tableData));

				// 遍历 skuData 中的每一行数据
				skuData.forEach(row => {
					// 检查是否存在 enroll_start 和 enroll_end 字段
					if (row.enroll_start) {
						row.enroll_start = this.formatTimestamp(row.enroll_start);
					}
					if (row.enroll_end) {
						row.enroll_end = this.formatTimestamp(row.enroll_end);
					}
				});

				// 收集需要的参数
				const params = {
					auto_create_class: false,
					cateids: 28,
					coach_ids: this.coachSelect.map(id => `${id}`), // 教练 ID 数组（如 ["354"]）
					content: "<p>测试</p>",
					course_ids: "213",
					course_item_ids: this.jiaoSelect, // 选中的课包 item_id 数组
					course_types: [],
					display_end: "2025-04-30",
					display_start: "2025-04-24",
					field_collect_id: 7,
					group1: this.group1,
					group1SkuList: this.group1SkuList,
					group2: this.group2,
					group2SkuList: this.group2SkuList,
					group3: this.group3,
					group3SkuList: this.group3SkuList,
					name: "培训班名称测试",
					open_group1: this.filters.open_group1,
					open_group2: this.filters.open_group2,
					open_group3: this.filters.open_group3,
					pay_wait_time: "11:37:34",
					picture: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/6809b2a8dd76f.jpeg",
					policy_id: 2,
					quantity: 1,
					remark: "测试",
					sign_auto_consume: false,
					sku_data: skuData, // 核心数据：使用转换后的 skuData
					slider: [],
					slider_pictures: [{
						url: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/6809b2abbbbe3.jpeg"
					}],
					train_course: "213-213-2",
					train_enum_id: 4,
					venue_id: 213,
				};
				// 打印数据到控制台
				console.log('确认创建参数:', params);

				// 发送请求示例（需替换为实际接口调用）
				// uni.request({
				//   url: 'https://your-api-domain/create-training',
				//   method: 'POST',
				//   data: params,
				//   success: (res) => {
				//     uni.showToast({ title: '创建成功', icon: 'none' });
				//   }
				// });
			},
			handjiao(item) {
				let data = item.item_id;
				const index = this.jiaoSelect.indexOf(data);
				if (index > -1) {
					this.jiaoSelect.splice(index, 1);
				} else {
					this.jiaoSelect.push(data);
				}
				this.addTableData();
				this.updateColumns(); // 点击后更新columns
			},
			handcoach(item) {
				let data = item.id;
				const index = this.coachSelect.indexOf(data);
				if (index > -1) {
					this.coachSelect.splice(index, 1);
				} else {
					this.coachSelect.push(data);
				}
				this.addTableData();
			},
			changeGroup(num) {
				if (num === 1 && this.group1) {
					this.columns.find(col => col.prop === 'group1') && (this.columns.find(col => col.prop ===
							'group1')
						.label = this.group1);
				} else if (num === 2 && this.group2) {
					this.columns.find(col => col.prop === 'group2') && (this.columns.find(col => col.prop ===
							'group2')
						.label = this.group2);
				} else if (num === 3 && this.group3) {
					this.columns.find(col => col.prop === 'group3') && (this.columns.find(col => col.prop ===
							'group3')
						.label = this.group3);
				}
				this.addTableData();
				this.updateColumns(); // 点击后更新columns
			},
			changeOpen(type) {
				if (!this.filters.train_course) {
					uni.showToast({
						title: '请先选择课程！',
						icon: 'none'
					});
					this.filters[`open_group${type}`] = false;
					return;
				}
				this.filters[`open_group${type}`] = !this.filters[`open_group${type}`];
				const skuList = this[`group${type}SkuList`];
				if (this.filters[`open_group${type}`]) {
					skuList.push({
						value: `规格1`
					});
				} else {
					this[`group${type}SkuList`] = [];
				}
				this.updateColumns();
				this.addTableData();
			},
			addSku(type) {
				const list = this[`group${type}SkuList`];
				const length = list.length + 1;
				list.push({
					value: `规格${length}`
				});
				this.addTableData();
			},
			removeInput(index, type) {
				const list = this[`group${type}SkuList`];
				list.splice(index, 1);
				this.addTableData();
			},
			changeSku(type) {
				this.addTableData();
			},
			addTableData() {
				this.tableData = [];
				const selectedCoursePackages = this.coursePackageList.filter(item => this.jiaoSelect.includes(item
					.item_id));
				const selectedCoaches = this.coachList.filter(item => this.coachSelect.includes(item.id));
				const group1Data = this.group1SkuList.map(item => item.value);
				const group2Data = this.group2SkuList.map(item => item.value);
				const group3Data = this.group3SkuList.map(item => item.value);

				// 定义维度类型与数据的映射
				const dimensions = [{
						type: 'coursePackage',
						data: selectedCoursePackages
					},
					{
						type: 'coach',
						data: selectedCoaches
					},
					{
						type: 'group1',
						data: group1Data
					},
					{
						type: 'group2',
						data: group2Data
					},
					{
						type: 'group3',
						data: group3Data
					},
				].filter(d => d.data.length > 0); // 过滤空维度

				// 计算笛卡尔积
				const cartesianProduct = (arrays) => {
					return arrays.reduce((acc, curr) => {
						const newAcc = [];
						acc.forEach(a => curr.data.forEach(c => newAcc.push([...a, {
							type: curr.type,
							value: c
						}])));
						return newAcc.length ? newAcc : curr.data.map(c => [{
							type: curr.type,
							value: c
						}]);
					}, []);
				};

				const combinations = cartesianProduct(dimensions);

				combinations.forEach(combination => {
					const row = {
						area_id: '' ,// 新增字段
						coach_id: 0,
						coach_name: '',
						hour_num: 0,
						time_long: '0',
						goods_sku: generateUnique13DigitNumber(),
						line_price: 0,
						package_id: '', // 新增字段
						selling_price: 0,
						stock: 0,
						student_num: 0,
						enroll_start: '', // 确保日期字段初始化为空字符串
						enroll_end: '', // 确保日期字段初始化为空字符串
						sku_status: true,
						group1: '',
						group2: '',
						group3: '',
						// showEnrollStartPicker: false,
						// showEnrollEndPicker: false
					};

					combination.forEach(item => {
						switch (item.type) {
							case 'coursePackage':
								row.hour_num = item.value.hour_num;
								row.line_price = item.value.course_price;
								row.hour_num_period = `${item.value.hour_num}/0`;
								const itemIdParts = item.value.item_id.split('-');
								if (itemIdParts.length >= 5) {
									row.package_id = itemIdParts[0]; // 第一个部分为 package_id
									row.area_id = itemIdParts[4]; // 第五个部分为 area_id
									row.time_long = itemIdParts[3]
								}
								break;
							case 'coach':
								row.coach_id = item.value.id;
								row.coach_name = item.value.coach_name;
								break;
							case 'group1':
								row.group1 = item.value; // 直接赋值分组1规格
								break;
							case 'group2':
								row.group2 = item.value; // 直接赋值分组2规格
								break;
							case 'group3':
								row.group3 = item.value; // 直接赋值分组3规格
								break;
						}
					});

					this.tableData.push(row);
				});
			},
			updateColumns() {
				const newColumns = [];
				if (this.filters.open_group1) {
					newColumns.push({
						prop: 'group1',
						label: this.group1,
						type: 'text',
						width: '120rpx',
						disable: true
					});
				}
				if (this.filters.open_group2) {
					newColumns.push({
						prop: 'group2',
						label: this.group2,
						type: 'text',
						width: '120rpx',
						disable: true
					});
				}
				if (this.filters.open_group3) {
					newColumns.push({
						prop: 'group3',
						label: this.group3,
						type: 'text',
						width: '120rpx',
						disable: true
					});
				}
				newColumns.push({
					prop: 'goods_sku',
					label: '培训班SKU',
					type: 'text',
					disable: true
				}, {
					prop: 'coach_name',
					label: '教练',
					type: 'text',
					disable: true
				}, {
					prop: 'hour_num',
					label: '课时数/有效期',
					type: 'text',
					disable: true
				}, {
					prop: 'line_price',
					label: '套餐价',
					type: 'number',
					disable: true
				}, {
					prop: 'selling_price',
					label: '报名价',
					type: 'number',
					disable: false
				}, {
					prop: 'stock',
					label: '名额',
					type: 'number',
					disable: false
				}, {
					prop: 'student_num',
					label: '单班人数',
					type: 'number',
					disable: false
				}, {
					prop: 'enroll_start',
					label: '报名开始日期',
					type: 'date',
					disable: false
				}, {
					prop: 'enroll_end',
					label: '报名结束日期',
					type: 'date',
					disable: false
				}, {
					prop: 'sku_status',
					label: '状态',
					type: 'checkbox',
					disable: false,
					checked: true
				});
				this.columns = newColumns;
			},
			handleDateChange(row, prop, e) {
				row[prop] = e;
			},
			confirm(e) {
				this.datalist = e
				this.show = false
				console.log(e.length);
			},
		}
	}
</script>

<style lang="less" scoped>
	.input-group {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.u-input {
		margin-right: 10rpx;
	}

	.u-icon {
		cursor: pointer;
	}

	.week-list {
		flex-direction: row;
		width: 100%;
		font-size: 24rpx;
		flex-wrap: wrap;
		display: flex;

		.week-item {
			padding: 15rpx 0;
			background-color: rgb(243, 243, 243);
			border-radius: 5rpx;
			text-align: center;
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			font-weight: 500;
			border: solid 2rpx transparent;
			box-sizing: border-box;
			padding: 6rpx 12rpx;
			margin-top: 20rpx;
			margin-right: 20rpx;
		}

		.active {
			color: rgba(255, 98, 0, 1);
			background-color: rgba(255, 65, 5, 0.1);
			position: relative;
		}

		.active1 {
			color: rgba(255, 98, 0, 1);
			background-color: rgba(255, 65, 5, 0.1);
			position: relative;
		}

		.active2 {
			color: rgba(255, 98, 0, 1);
			background-color: rgba(255, 65, 5, 0.1);
			position: relative;
		}

		.check {
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			position: absolute;
			bottom: 10rpx;
			right: 0;
		}

		table {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
		}

		thead {
			width: 100%;
		}

		tbody {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
		}

		tr {
			width: 100%;
			box-sizing: border-box;
			display: flex;
		}

		th,
		td {
			width: 15%;
		}
	}

	.data-display {
		margin-top: 20rpx;
		width: 100%;
		border-collapse: collapse;
		/* 合并边框 */
	}

	.data-row {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #e5e5e5;
		/* 行分隔线 */
		background-color: antiquewhite;
		margin-bottom: 20rpx;
	}

	.data-cell {
		flex: 1;
		min-width: 160rpx;
		/* 最小单元格宽度 */
		padding: 8rpx;
		box-sizing: border-box;

		&:nth-child(n+1) {
			/* 可选：单元格垂直分隔线 */
			/* border-right: 1rpx solid #e5e5e5; */
		}
	}

	.label {
		font-size: 24rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 5rpx;
		display: block;
		/* 标签单独占一行 */
		text-align: left;
	}

	.input-container {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 5rpx;
		/* 输入框与其他元素间距 */
	}

	.input-container input {
		width: 100%;
		height: 40rpx;
		padding: 0 10rpx;
		border: 1rpx solid #d9d9d9;
		border-radius: 4rpx;
		font-size: 24rpx;

		&[type="checkbox"] {
			width: auto;
			height: 24rpx;
			margin-left: 0;
		}

		&[type="date"] {
			width: 180rpx;
			/* 日期输入框稍宽 */
		}
	}
</style>